<template>
    <de-layout-content :showTitle="false" class="de-search-table">
      <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
          <el-form-item label="用户名称/昵称" prop="nickName">
            <el-input
              v-model="queryParams.nickName"
              placeholder="请输入用户名称/昵称"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="手机号码" prop="phonen">
            <el-input
              v-model="queryParams.phonen"
              placeholder="请输入手机号码"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
    
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="openSelectUser"
              v-hasPermi="['system:role:add']"
            >添加用户</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-circle-close"
              size="mini"
              :disabled="multiple"
              @click="cancelAuthUserAll"
              v-hasPermi="['system:role:remove']"
            >批量取消授权</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-close"
              size="mini"
              @click="handleClose"
            >关闭</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
    
        <el-table v-loading="loading" :data="userList" style="margin: 20px 0;" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="用户名称" prop="username" :show-overflow-tooltip="true" />
          <el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
          <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
          <el-table-column label="手机" prop="phone" :show-overflow-tooltip="true" />
          <el-table-column label="状态" align="center" prop="enabled">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.enabled === 1">正常</el-tag>
              <el-tag v-else type="info">停用</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="180">
            <template slot-scope="scope">
              <span v-if="scope.row.createTime">{{ parseTimeFunc(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-circle-close"
                @click="cancelAuthUser(scope.row)"
                v-hasPermi="['system:role:remove']"
              >取消授权</el-button>
            </template>
          </el-table-column>
        </el-table>
    
        <el-pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
        <select-user ref="select" :roleId="queryParams.roleId" @ok="handleQuery" />
      </div>
    </de-layout-content>
  </template>
  
  <script>
  import { allocatedUserList, authUserCancel } from "@/api/system/role";
  import selectUser from "./selectUser";
  import { parseTime } from '@/utils/index'
  import DeLayoutContent from '@/components/business/DeLayoutContent'
  
  export default {
    name: "AuthUser",
    components: { selectUser,DeLayoutContent },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中用户组
        userIds: [],
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 用户表格数据
        userList: [],
        // 查询参数
        queryParams: {
          pageNo: 1,
          pageSize: 10,
          roleId: undefined,
          nickName: undefined,
          phonen: undefined
        }
      };
    },
    created() {
      const roleId = this.$route.query && this.$route.query.roleId;
      if (roleId) {
        this.queryParams.roleId = roleId;
        this.getList();
      }
    },
    methods: {
      parseTimeFunc(data) {
        return parseTime(data)
      },
      /** 查询授权用户列表 */
      getList() {
        this.loading = true;
        allocatedUserList(this.queryParams).then(response => {
            this.userList = response.data.records
            this.total = response.data.total;
            this.loading = false;
          }
        );
      },
      // 返回按钮
      handleClose() {
        this.$router.push("/role");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNo = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams = {
          pageNo: 1,
          pageSize: 10,
          roleId: undefined,
          nickName: undefined,
          phonen: undefined
        }
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.userIds = selection.map(item => item.userId)
        this.multiple = !selection.length
      },
      /** 打开授权用户表弹窗 */
      openSelectUser() {
        this.$refs.select.show();
      },
      /** 取消授权按钮操作 */
      cancelAuthUser(row) {
        const roleId = this.queryParams.roleId;
        this.$confirm('确认要取消该用户"' + row.username + '"角色吗？').then(function() {
          return authUserCancel({ userIds: [row.userId], roleId: roleId });
        }).then((res) => {
          if(res.success){
            this.getList();
            this.$success('取消授权成功')
          }
        }).catch(() => {});
      },
      /** 批量取消授权按钮操作 */
      cancelAuthUserAll(row) {
        const roleId = this.queryParams.roleId;
        const userIds = this.userIds;
        this.$confirm('是否取消选中用户授权数据项？').then(function() {
          return authUserCancel({ roleId: roleId, userIds: userIds });
        }).then((res) => {
          if(res.success){
            this.getList();
            this.$success('取消授权成功')
          }
        }).catch(() => {});
      }
    }
  };
  </script>